<template>
	<view class="context">
		<uni-nav-bar left-icon="back" statusBar border="false" @clickLeft="backLeft" title="医生管理" :border="false"></uni-nav-bar>
		<view class="auditStatus" v-if="doctors">
			<text v-for="(item,index) in audits" :key="item.id" @click="status(index)" :class="auditsindex == index ? 'selectStatus': ''">{{item}}</text>
		</view>
		<!-- 待审核,已通过,未通过 -->
		<view v-show="auditsindex == 0" class="doctorManagement" v-for="(item,index) in doctors" :key="item.id" @click="details(index)">
			<view class="headPortrait">
				<image :src="item.user_url" mode="scaleToFill" style="width: 100rpx; height: 100rpx;"></image>
			</view>
			<view class="info">
				<text>{{item.user_name}} <text v-if="item.is_status == 2">等待审核</text> <text v-else-if="item.is_status == 3">审核未通过</text>
				</text>
				<text v-if="item.user_sex === '2'">女<text>{{item.date_time}}</text></text>
				<text v-else-if="item.user_sex === '1'">男<text>{{item.date_time}}</text></text>
				<text>{{item.graduation}}</text>
			</view>
		</view>

		<!-- <view class="addDoctorsImg" v-if="!doctors">
			<image src="../../../../static/image/doctor/examinel1.png" mode="scaleToFill" style="width: 500rpx; height: 450rpx;"></image>
		</view> -->

	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons
		},
		onLoad() {
			this.getClinicList();
		},
		data() {
			return {
				auditsindex: 0,
				audits: ["已通过", "待审核", "未通过"],
				doctors: null,
			};
		},
		methods: {
			backLeft() {
				uni.switchTab({
					url: "../../homePage3/homePage3"
				})
			},
			jumpHomePage() {
				uni.navigateTo({
					url: "../../homePage3/homePage3"
				})
			},
			// 改变状态
			async status(index) {
				this.auditsindex = index;
				this.getClinicList(index + 1);
			},
			// 页面跳转
			async details(index) {
				if (this.auditsindex == 2) return;
				uni.navigateTo({
					url: `../details4/details4?doctorsdatas=${encodeURIComponent(JSON.stringify(this.doctors[index]))}`
				});
			},

			addDoctors2(index) {
				uni.navigateTo({
					url: "../addDoctors2/addDoctors2"
				});
			},

			async getClinicList(index = 1) {
				let id = this.$store.state.userinfo.id;
				const res = await this.$myrequest({
					url: `Service/getDoctorByStatus?id=${id}&status=${index}`
				});
				this.doctors = res.data.data;
				console.log(`医生的页面了把`);
				console.log(this.doctors);
				console.log(`医生的页面了把`);
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.context {
		width: 100%;
		height: 100%;
		background-color: RGBA(245, 246, 250, 1);

		.auditStatus {
			width: 100vw;
			height: 80rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			color: rgba(150, 151, 153, 1);

			>text {
				flex: 1;
				text-align: center;
			}
		}

		.doctorManagement {
			width: calc(100vw - 80rpx);
			margin: 20rpx auto;
			display: flex;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 20rpx;

			.headPortrait {
				flex: 1;

				image {
					border-radius: 50%;
				}
			}

			.info {
				flex: 5;
				margin-left: 20rpx;
				color: rgba(166, 163, 166, 1);

				>text {
					&:first-of-type {
						display: inline-block;
						width: 100%;
						font-size: 32rpx;
						font-weight: bolder;
						letter-spacing: 5rpx;
						color: rgba(55, 52, 56, 1);

						text {
							color: rgba(255, 76, 47, 1);
							margin-left: 250rpx;
							font-size: 28rpx;
						}
					}

					&:nth-of-type(2) {
						display: inline-block;
						width: 100%;

						text {
							margin-left: 70rpx;
						}
					}
				}
			}
		}

		// 选中状态
		.selectStatus {
			color: rgba(45, 209, 188, 1);
			position: relative;

			&::after {
				display: block;
				content: "";
				width: 16%;
				height: 4rpx;
				border-radius: 4rpx;
				background-color: rgba(45, 209, 188, 1);
				@include shuiping;
				bottom: -12rpx;
			}
		}

		// 当没有医生时
		.addDoctorsImg {
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translate(-50%, -50%);

			&::before {
				display: block;
				width: 100vw;
				text-align: center;
				content: "您还没有添加医生，快去添加您的医生吧";
				@include shuiping;
				bottom: -45rpx;
			}
		}
	}

	.addDoctors {
		@include dibuanniu;
		width: 650rpx;
		bottom: 70rpx;
	}

	.addDoctors1 {
		@include dibuanniu;
		width: 350rpx;
		bottom: 365rpx;
	}
</style>
